﻿<MCard Class="overflow-hidden">
    <MAppBar
        Absolute
        Color="#43a047"
        Dark
        ShrinkOnScroll
        Prominent
        Src="_content/Masa.Blazor.Docs/img/423-1920x1080.jpg"
        FadeImgOnScroll
        ScrollTarget="#scrolling-techniques-55"
        ScrollThreshold="500">
        <ImgContent>
            <MImage
                @attributes="context"
                Gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)">
            </MImage>
        </ImgContent>

        <ChildContent>
            <MAppBarNavIcon></MAppBarNavIcon>

            <MAppBarTitle>Title</MAppBarTitle>

            <MSpacer></MSpacer>

            <MButton Icon>
                <MIcon>mdi-magnify</MIcon>
            </MButton>

            <MButton Icon>
                <MIcon>mdi-heart</MIcon>
            </MButton>

            <MButton Icon>
                <MIcon>mdi-dots-vertical</MIcon>
            </MButton>
        </ChildContent>
    </MAppBar>
    <MSheet Id="scrolling-techniques-55"
            Class="overflow-y-auto"
            MaxHeight="600">
        <MContainer Style="height: 1500px;"></MContainer>
    </MSheet>
</MCard>